<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            background-color: #76838f;
            word-wrap: break-word;
            overflow-x: hidden;
        }

        .el-header .el-menu-item a {
            font-size: 15px;
            text-decoration: none;
            color: white;
        }

        .el-menu.el-menu--horizontal {
            border: 0; /*去掉导航菜单 自带的边框*/
        }

        .el-header img {
            position: relative;
        }

        #el-main-div1 {
            font-size: 15px;
            color: #76838f;
            margin: 25px 0 0 250px;
        }

        #el-main-src1 {
            margin: 10px 0 0 350px;
        }

        a {
            text-decoration: none;
            color: #000;
            text-align: center;
        }

        li {
            list-style: none;
            margin-right: 40px;
            font-size: 14px;
        }


    </style>
</head>
<body>
<div id="app">
    <el-header height="60px" style="background-color: #545c64">
        <div style="width: 1200px;margin: 0 auto">
            <img src="https://www.dabeiphoto.com.cn/upload/202107/1625185166.png" style="vertical-align: middle"
                 width="150" height="60">
            <span style="float:right;margin-right: 10px;">
        <el-menu mode="horizontal" style="background-color: #545c64">
          <el-menu-item index="1"><a href="">网站首页</a></el-menu-item>
          <el-menu-item index="2"><a href="">关于我们</a></el-menu-item>
          <el-menu-item index="3"><a href="">拍摄价格</a></el-menu-item>
          <el-menu-item index="4"><a href="">作品展示</a></el-menu-item>
          <el-menu-item index="5"><a href="">联系我们</a></el-menu-item>
        </el-menu>
      </span>
        </div>
    </el-header>
    <el-main style="width: 100%">
        <el-card style="background-color: #e8e8e8">
            <div>
                <el-carousel height="300px">
                    <el-carousel-item><img src="https://www.dabeiphoto.com.cn/upload/201901/1547538851.jpg" width="100%"
                                           height="100%"></el-carousel-item>
                </el-carousel>
            </div>
            <el-card style="margin-bottom: 30px">
                <div id="el-main-div1">你的位置》 <i class="el-icon-s-home"></i>网站首页》 拍摄价格》 儿童摄影
                    <el-divider></el-divider>
                </div>
                <div>
                    <el-row gutter="30px" id="el-main-el-row1">
                        <el-col span="12">                          <!--第一张图片-->
                            <img id="el-main-src1"
                                 src="https://www.dabeiphoto.com.cn/upload/thumb_src/335_470/1653987718.jpg">
                        </el-col>
                        <el-col span="12">
                            <p style="font-size: 25px;margin-bottom: 0px">儿童黑白4寸剪裁大头照</p>
                            <el-col span="8">
                                <p style="font-size: 14px;">规格： 4寸/p>
                                <p style="font-size: 14px;">价格：120</p>
                                <p style="font-size: 14px;margin-bottom: 30px">加一文件价格：48</p>
                                <p style="font-size: 14px;">是否预约： 不需要预约</p>
                            </el-col>
                            <el-col span="16">
                                <p style="font-size: 14px;">每份张数： 2</p>
                                <p style="font-size: 14px;">加洗一张价格：20</p>
                                <p style="font-size: 14px;">拍摄门店：所有门店</p>
                            </el-col>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
            <div>
                <el-row gutter="20" align="center">
                    <el-col span="4" style="margin-left: 200px">
                        <el-card style="text-align: center;">
                            <ul>
                                <li><a href=""><span style="color: #1baadb;font-size: 24px;">拍摄价格</span></a></li>
                                <li>
                                    <hr>
                                    <a href="" title="childPrice"><span>儿童摄影</span></a>
                                    <hr>
                                </li>
                                <li><a href="" title="familyPrice"><span>家庭合影</span></a></li>
                                <li>
                                    <hr>
                                    <a href="" title="artPrice"><span>艺术摄影</span></a>
                                    <hr>
                                </li>
                                <li><a href="" title="xizhuangPrice"><span>戏装摄影</span></a></li>
                                <li>
                                    <hr>
                                    <a href="" title="idPrice"><span>证件摄影</span></a>
                                    <hr>
                                </li>
                                <li><a href="" title="classicsPrice"><span>经典摄影</span></a></li>
                                <li>
                                    <hr>
                                    <a href="" title="marryPrice"><span>婚纱摄影</span></a>
                                    <hr>
                                </li>
                                <li><a href="" title="teamPrice"><span>团队摄影</span></a>
                                    <hr>
                                </li>
                            </ul>
                        </el-card>
                    </el-col>
                    <el-col span="14">
                        <el-card style="height: 393px;"><!--根据页面改长短-->
                            <p style="margin-left: 20px">详情信息:</p>
                            <el-divider></el-divider>
                            </el-input>
                            <el-divider></el-divider>
                            <div style="margin: 20px 0;">
                                <p style="text-align: center">当前还没有人发表过评论......</p>
                            </div>
                            <el-input
                                    type="textarea"
                                    placeholder="说点什么吧...."
                                    v-model="textarea"
                                    maxlength="50"
                                    show-word-limit
                                    style="height: 40px;
                      margin-bottom: 15px">
                            </el-input>
                            <el-button style="float:right;">发表</el-button>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </el-main>
    <el-footer>
        <div style="background-color: #545c64;text-align: center;
             color: white;padding: 50px 0">
            <p>大北照相馆官方网站，为您提供照相前指导，普及照相知识，提供优质网络服务！</p>
            <p>北京大北照相有限责任公司 京ICP备15047318号-1 </p>
        </div>
    </el-footer>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [{
                    sets: 'A套',
                    price: '500元',
                    content: '单人拍摄7寸两张（皮册装裱）'
                }, {
                    sets: 'B套',
                    price: '345元',
                    content: '单人拍摄8寸镜框一幅（普通镜框装裱）'
                }, {
                    sets: 'C套',
                    price: '415元',
                    content: '双人拍摄8寸镜框一幅（普通镜框装裱）'
                }, {
                    sets: 'D套',
                    price: '515元',
                    content: '三人拍摄8寸镜框一幅（普通镜框装裱）'
                }],
                text: '',
                textarea: ''
            }
        },
        methods: {}
    })
</script>
</html>